import React, { useState, useEffect } from "react";
import { Badge, TabBar } from "antd-mobile";
import "./index.scss";
import { useNavigate, useLocation } from "react-router-dom";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import explore from "../../assets/img/tab_explore_normal.png";
import explore1 from "../../assets/img/tab_explore_selected.png";
import today from "../../assets/img/tab_today_normal.png";
import today1 from "../../assets/img/tab_today_selected.png";
import mine from "../../assets/img/tab_mine_normal.png";
import mine1 from "../../assets/img/tab_mine_selected.png";

export default () => {
  const tabs = [
    {
      key: "/",
      title: "今日",
      icon: (active: boolean) => (
        <img className="tab-icon" src={active ? today1 : today} />
      ),
    },
    {
      key: "/explore",
      title: "探索",
      icon: (active: boolean) => (
        <img className="tab-icon" src={active ? explore1 : explore} />
      ),
    },
    {
      key: "/mine",
      title: "我的",
      icon: (active: boolean) => (
        <img className="tab-icon" src={active ? mine1 : mine} />
      ),
    },
  ];

  const [activeKey, setActiveKey] = useState("");
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const handleTab = (key: string) => {
    console.log(key);
    navigate(key);
    setActiveKey(key);
  };
  useEffect(() => {
    setActiveKey(pathname);
  }, [pathname]);

  return (
    <>
      <TabBar activeKey={activeKey} className="tab-bottom" onChange={handleTab}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </>
  );
};
